<template>
    <div class="DeaWerbox">
<div @click="fn"  class="DeaWerLeft">
</div>
<div class="DeaWerRight">
    <ul class="uls">
        <li>
            <span class="iconfont icon-31wode"></span>
            <span v-html="arr.names!=''?'':'用户名'"></span><span>{{arr.names}}</span>
        </li>
        <li>
            <span class="iconfont icon-shouye"></span>
            <span @click="fn">首页</span>
        </li>
        <li>
             <span class="iconfont icon-resume-line"></span>
             <router-link tag="span" to="/resume">简历中心</router-link>
        </li>
        <li>
            <span class="iconfont icon-sousuo"></span>
            <router-link tag="span" to="/position/zhiw">找工作</router-link>
        </li>
        <li>
            <span class="iconfont icon-c-jilu"></span>
            <span>投递反馈</span>
        </li>
        <li>
            <span class="iconfont icon-shoucang"></span>
            <span>职位收藏夹</span>
        </li>
    </ul>
</div>
</div>


</template>

<script>
import { mapMutations,mapState} from 'vuex';
export default {
    data() {
      return {
      };
    },
    methods:{
        ...mapMutations(['fn'])
    }
    ,computed:{
        ...mapState(["arr"])
    }
}
</script>

<style scoped>
.uls{
    padding-top: .3rem;
    font-size: .4rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    height: 80%;
    color: white;
    align-items: center;
}
.uls>li{
    width: 75%;
    line-height: .9rem;
    padding-left: .5rem;
    margin-bottom: .4rem;
    border-bottom: .01rem solid white;
}
.uls>li>span:nth-of-type(1){
     font-size: .5rem;
     margin-right: .3rem;

}
.DeaWerbox{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    /* background-color: transparent; */
}
.DeaWerLeft{
    float: left;
     background-color: rgba(0,0,0,.5);
     content: " ";
        width: 40%;
        height: 100%;
}
.DeaWerRight{
    float: left;
    content: " ";
    width: 60%;
    height: 100%;
    background-color: #333;
    /* position: fixed;
    z-index: 40;
    top: 0;
    right: 0; */
    height: 100%;
}
</style>